<template>
  <div class="login">
    <div class="login-block">
      <div class="logo">
        <img :src="logoImg" alt="logo" />
      </div>
      <el-form :rules="rules" ref="ruleForm" :model="form" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            @keyup.native.enter="onSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            @keyup.native.enter="onSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logoImg: require('@/assets/img/logo.png'),
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const res = await this.$http.post('/login', {
            username: this.form.username,
            password: this.form.password
          })
          console.log(res)

          const {
            data,
            meta: { msg, status }
          } = res.data

          if (status === 200) {
            this.$message({
              message: msg,
              type: 'success'
            })

            // 登录成功，存储 token，转入主页
            // localStorage.setItem('token', data.token)
            window.sessionStorage.setItem('username', data.username)
            // 改用 sessionStorage 保存（浏览器关闭后登录状态失效）
            window.sessionStorage.setItem('token', data.token)
            this.$router.push('/')
          } else {
            this.$message.error(msg)
          }
        } else {
          this.$message.error('填入项未通过验证')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-color: #224063;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-block {
    width: 400px;
    padding: 50px 30px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 8px #eeeeee;

    .logo {
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      img {
        height: 100%;
      }
    }
  }
}
// 暂未做注册
</style>
